<template>
  <div class="operational-flow-regin-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">总访问量</div>
          </el-col>
          <el-col :span="18" align="right">
            <el-date-picker v-model="gameTime" type="daterange" align="right" unlink-panels range-separator="至"
                            @change="submitFilterForm"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            :picker-options="pickerDayStep">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-row class="db-category-list">

            <el-col class="db-category-item"
                    v-for="(summary,key) in summaryList"
                    :span="summary.span" :xs="summary.span" :md="summary.span"
                    :key="key"
            >
              <div>
                <div class="card-name">{{summary.name}}</div>
                <div class="card-data">{{summary.data}}</div>
                <!--<div class="card-data">{{ (category.data && category.data.length==2 && category.data[1])||0}}</div>-->
              </div>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">区域分析</div>
          </el-col>
          <el-col :span="18" align="right">
            <el-select v-model="option" style="width: 200px;">
              <el-option
                v-for="item in locationOptions"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-col :span="12" class="">
        <location-chart :yData="yData"></location-chart>
      </el-col>
      <el-col :span="12" class="">
        <refer-chart :yData="yData" :opts="{label:{show:false}}"></refer-chart>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">区域详情</div>
          </el-col>
          <el-col :span="18">
          </el-col>
        </el-row>
      </div>
      <div class="height-200" ref="profitChart">
        <el-table :data="summaryData" border style="width:100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.cityArray" border style="width:100%" :show-header="true">
                <el-table-column
                  prop="name"
                  label="区域"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="pv"
                  label="浏览次数(PV)"
                >
                </el-table-column>
                <el-table-column
                  prop="uv"
                  label="独立访客(UV)">
                </el-table-column>
                <el-table-column
                  prop="ip"
                  label="IP">
                </el-table-column>
                <el-table-column
                  prop="new"
                  label="新独立访客">
                </el-table-column>
                <el-table-column
                  prop="rate"
                  label="PV占比">
                </el-table-column>
              </el-table>

            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="区域"
            width="80">
          </el-table-column>
          <el-table-column
            prop="pv"
            label="浏览次数(PV)">
          </el-table-column>
          <el-table-column
            prop="uv"
            label="独立访客(UV)">
          </el-table-column>
          <el-table-column
            prop="ip"
            label="IP">
          </el-table-column>
          <el-table-column
            prop="new"
            label="新独立访客">
          </el-table-column>
          <el-table-column
            prop="rate"
            label="PV占比">
          </el-table-column>
        </el-table>
      </div>
    </el-card>


  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {pickerOption} from '@/build'
  import {grid} from '@/build'

  import {locationBasicApi, locationSummaryApi} from '@/services/api/operationalflow';
  import locationChart from '../components/locationChart'
  import referChart from '../components/referChart'

  export default {
    name: 'region',
    components: {
      locationChart, referChart
    },
    mixins: [pickerOption, grid],
    data() {
      // let times = _.toPeriod({
      //   start: [-1, 'days'],
      //   end: [0, 'days'],
      //   format: 'YYYY-MM-DD'
      // });
      // 本月时间本月1号至当前时间
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      return {
        basicData: [],
        summaryData: [],
        categoryData: {
          dateList: [],
        },
        // summaryTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        gameTime: monthTime,
        currentCategory: undefined,
        currentGameStatisticType: 'win',
        filters: {
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() +  86399999,
        },
        option: 'pv',
        locationOptions: [
          {
            value: 'pv',
            label: '浏览次数(PV)'
          },
          {
            value: 'uv',
            label: '独立访客(UV)'
          },
          {
            value: 'ip',
            label: 'IP'
          },
          {
            value: 'new',
            label: '新独立访客'
          },
        ]
      }
    },
    computed: {
      ...mapGetters([]),
      ...mapState({
        trend: state => state.trend,
      }),
      yData() {
        let param = this.option;
        return _.map(this.summaryData, (item, key) => {
          return {name: item.name, value: item[param] || 0}
        })
      },
      summaryList() {//累计数据概要
        // let summary = this.trend.summary;
        let basic = this.basicData || {};
        return {
          recharge: {
            type: 1,
            key: 'recharge',
            name: '浏览次数(PV)',
            span: 6,
            data: basic.pv,
          },
          rechargeUser: {
            type: 2,
            key: 'rechargeUser',
            name: '独立访客(UV)',
            span: 6,
            data: basic.uv,
          },
          withdraw: {
            type: 3,
            key: 'withdraw',
            name: 'IP',
            span: 6,
            data: basic.ip,
          },
          withdrawUser: {
            type: 4,
            key: 'withdrawUser',
            name: '新独立访客',
            span: 6,
            data: basic.new,
          },
        }
      },


    },
    watch: {},
    created() {

      this.bindGet(locationBasicApi, 'basicData', {
        action: 'getGrid',
        sendingData: 'filters',
        // format: data => {
        //   let result = [];
        //   _.forIn(data, (value, key) => {
        //     result.push({...value, date: key, regRate: _.formatDiv(value.reg, (value.ip + value.reg), {fixed: 2})})
        //   })
        //   return result;
        // }
      });
      this.bindGet(locationSummaryApi, 'summaryData', {
        action: 'getSummary',
        sendingData: 'filters',
        format: data => {
          let ip = data.ip && data.ip.China && data.ip.China.bucket || {};//省综合对象
          let pv = data.pv && data.pv.China && data.pv.China.bucket || {};//省综合对象
          let newer = data.new && data.new.China && data.new.China.bucket || {};//省综合对象
          let pvTotal = data.pv && data.pv.China && data.pv.China.total || 0;//省综合对象
          let uv = data.uv && data.uv.China && data.uv.China.bucket || {};//省综合对象
          let provinces = _.map(consts.PROVINCE, (item) => {
            //从确定数量的省开始遍历。
            let chName = item.name;//省中文名
            let enName = item.english;//省英文名
            let key = _.upperFirst(enName);//省英文名，首字母大写
            let provinceIPObj = ip[key] || {};
            let provincePVObj = pv[key] || {};
            let provinceUVObj = uv[key] || {};
            let provinceNewObj = newer[key] || {};
            let cityIPBucket = provinceIPObj && provinceIPObj.bucket || {};
            let cityPVBucket = provincePVObj && provincePVObj.bucket || {};
            let cityUVBucket = provinceUVObj && provinceUVObj.bucket || {};
            let cityNewBucket = provinceNewObj && provinceNewObj.bucket || {};
            let province = {name: chName};
            province.ip = provinceIPObj.total || 0;
            province.pv = provincePVObj.total || 0;
            province.uv = provinceUVObj.total || 0;
            province.new = provinceNewObj.total || 0;
            province.rate = pvTotal ? province.pv ? (province.pv * 100 / pvTotal).toFixed(1) : 0 : '--';
            province.citys = {};
            _.forIn(cityIPBucket, (value, key) => {
              let city = province.citys[key];
              if (city) {
                return;
              } else {
                city = {};
                city.name = key;
                city.ip = value;
                city.pv = cityPVBucket[key] || 0;
                city.uv = cityUVBucket[key] || 0;
                city.new = cityNewBucket[key] || 0;
                city.rate = city.pv ? (city.pv * 100 / province.pv).toFixed(1) : 0;
                province.citys[key] = city;
              }

            });
            _.forIn(cityPVBucket, (value, key) => {
              let city = province.citys[key];
              if (city) {
                return;
              } else {
                city = {};
                city.name = key;
                // city.ip = cityIPBucket[key];
                city.pv = value;
                city.uv = cityUVBucket[key] || 0;
                city.new = cityNewBucket[key] || 0;
                city.rate = city.pv ? (city.pv * 100 / province.pv).toFixed(1) : 0;
                province.citys[key] = city;
              }

            });
            _.forIn(cityUVBucket, (value, key) => {
              let city = province.citys[key];
              if (city) {
                return;
              } else {
                let city = {};
                city.name = key;
                // city.ip = cityIPBucket[key];
                // city.pv = cityPVBucket[key];
                city.uv = value;
                city.new = cityNewBucket[key] || 0;
                city.rate = city.pv ? (city.pv * 100 / province.pv).toFixed(1) : 0;
                province.citys[key] = city;
              }
            });
            _.forIn(cityNewBucket, (value, key) => {
              let city = province.citys[key];
              if (city) {
                return;
              } else {
                let city = {};
                city.name = key;
                // city.ip = cityIPBucket[key];
                // city.pv = cityPVBucket[key];
                // city.uv = cityUVBucket[key];
                city.new = value;
                city.rate = city.pv ? (city.pv * 100 / province.pv).toFixed(1) : 0;
                province.citys[key] = city;
              }
            });
            let cityArray = [];
            _.forIn(province.citys, (value, key) => {
              cityArray.push(value);
            })
            province.cityArray = cityArray;
            return province;

          })
          return provinces;
        }
      });
    },
    mounted() {
      this.submitFilterForm()
    },

    beforeDestroy() {

    },
    methods: {
      submitFilterForm() {
        const time = this.gameTime;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() +  86399999;
        }
        this.filters = {stime, etime, project: consts.PLATFROM_PREFIX}
        this.doGet({action: 'getSummary'})
        this.doGet({action: 'getGrid'});
      },


      categoryChange(category) {
        this.currentCategory = category;
      },
      changeGameStatisticType(type) {
        this.currentGameStatisticType = type;
      },

    }
  }
</script>
<style lang="scss">
  .operational-flow-regin-container {
    .el-table__expanded-cell {

    }
  }

  $border-color-1: #DCDFE6;
  .db-category-list {
    border: 1px solid $border-color-1;
    overflow: hidden;

  }


  .db-category-item {
    height: 100px;
    padding: 10px;
    border-right: 1px solid $border-color-1;
    line-height: 16px;
    cursor: pointer;

    &:last-child {
      border-right: 0;
    }

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #e7e7e7;
      /*color: #fff;*/
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }


  .card-container {
    margin: 10px 0;
  }

  .card-name {
    height: 40px;
    text-align: center;
    flex: 0 1 50%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-data {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

</style>
